<template>
	<page-meta :root-font-size="getRootFontSize()"></page-meta>	
	<view class="">
		<view class="topBox">
			<view class="status_bar"></view>
			<uni-nav-bar
				style="width: 750rpx; height: 44px; border-bottom: 1px solid #F2F2F2;"
				color="#9F9F9F"
				:border="false"
				:shadow="false"
				background-color="#F1F1F1"
				@clickLeft="gaoback"
				@clickRight="showSetUp"
			>
				<view class="titleImg"><image style="width: 100%; height: 100%;" mode="scaleToFill" src="/static/icon/logo_ctw@3x.png"></image></view>
				<view slot="left">
					<view class="leftIconBox"><uni-icons type="arrowleft" color="#000" size="18"></uni-icons></view>
				</view>
				<view slot="right"><uni-icons type="bars" color="#9F9F9F" size="28"></uni-icons></view>
			</uni-nav-bar>
		</view>
		<view class="zhuti" :style="{ marginTop: topBar }">
			<!-- 标题 -->
			<view class="titleBox">
				<view class="titleBoxcenter">
					<text>{{ i18n.ctwfont69 }}</text>
				</view>
			</view>
			<view class="tishiTitle">
				<view class="">{{ titleName[current - 1] }}</view>
			</view>
			<!-- 步骤条 -->
			<view class="stepBarBox">
				<view class="stepBarItem">
					<view class="stepBarP">
						<view class="stepBarItemBox" :class="stepBarCurrent === 1 ? (stepBarCurrent2 === 2 ? 'isOkClick2' : 'isOkClick') : ''">
							<uni-icons v-if="stepBarCurrent2 === 2" type="checkmarkempty" color="#038A15" size="28"></uni-icons>
							<text v-else>1</text>
						</view>
						<view class="stepBarItemText" :class="stepBarCurrent === 1 ? 'isOkClickText' : ''">{{ i18n.ctwfont71 }}</view>
						<view class="stepBarPLine">
							<dotted-line :dash="stepBarCurrent2 === 2 ? false : true" X dash-width="14" :color="stepBarCurrent2 === 2 ? '#038A15' : '#E4E4E4'"></dotted-line>
						</view>
					</view>
					<view class="stepBarP">
						<view class="stepBarItemBox" :class="stepBarCurrent2 === 2 ? (stepBarCurrent3 === 3 ? 'isOkClick2' : 'isOkClick') : ''">
							<uni-icons v-if="stepBarCurrent3 === 3" type="checkmarkempty" color="#038A15" size="28"></uni-icons>
							<text v-else>2</text>
						</view>
						<view class="stepBarItemText" :class="stepBarCurrent2 === 2 ? 'isOkClickText' : ''">{{ i18n.ctwfont72 }}</view>
						<view class="stepBarPLine">
							<dotted-line :dash="stepBarCurrent3 === 3 ? false : true" X dash-width="14" :color="stepBarCurrent3 === 3 ? '#038A15' : '#E4E4E4'"></dotted-line>
						</view>
					</view>
					<view class="stepBarP">
						<view class="stepBarItemBox" :class="stepBarCurrent3 === 3 ? 'isOkClick' : ''">3</view>
						<view class="stepBarItemText" :class="stepBarCurrent3 === 3 ? 'isOkClickText' : ''">{{ i18n.ctwfont73 }}</view>
					</view>
				</view>
			</view>

			<!-- form表单 -->
			<!-- 第一步 -->
			<uni-forms v-if="current === 1 && langShow1" class="formBox" :modelValue="formList" ref="form2" :rules="rules" validateTrigger="bind">
				<uni-forms-item :label="i18n.ctwfont60" :labelWidth="120" name="phone" required class="formItemBox">
					<input type="text" :maxlength="30" class="classInput" v-model="formList.phone" :placeholder="i18n.ctwfont61" @input="binddata('phone', $event.detail.value)" />
				</uni-forms-item>
				<uni-forms-item :label="i18n.ctwfont78" :labelWidth="120" name="commodity" required class="formItemBox">
					<input
						type="text"
						class="classInput"
						:maxlength="20"
						v-model="formList.commodity"
						:placeholder="i18n.ctwfont62"
						@input="binddata('commodity', $event.detail.value)"
					/>
				</uni-forms-item>
				<view class="submitBtn">
					<button size="mini" @tap="gaoback" class="submitBtnL" type="default">{{ i18n.ctwfont18 }}</button>
					<button size="mini" class="submitBtnR" @tap="FormSubmit" type="default">{{ i18n.ctwfont76 }}</button>
				</view>
			</uni-forms>
			<!-- 第二步 -->
			<view v-if="current === 2" class="formBox2">
				<uni-row class="boxShow">
					<uni-col :span="14">
						<view class="classInput2">{{ i18n.ctwfont60 }}</view>
						<view class="huiLine"></view>
						<view class="classInput2">{{ i18n.ctwfont74 }}</view>
						<view class="huiLine"></view>
						<view class="classInput2">{{ i18n.ctwfont78 }}</view>
						<view class="huiLine"></view>
						<view class="classInput2">{{ i18n.ctwfont79 }}</view>
						<view class="huiLine"></view>
						<view class="classInput2">{{ i18n.ctwfont26 }}</view>
					</uni-col>
					<uni-col :span="10">
						<view class="classInput2">{{ formList2.customerCode }}</view>
						<view class="huiLine"></view>
						<view class="classInput2">{{ formList2.customerThaiName }}</view>
						<view class="huiLine"></view>
						<view class="classInput2">{{ formList2.idCard }}</view>
						<view class="huiLine"></view>
						<view class="classInput2">{{ formList2.salespersonCode }}</view>
						<view class="huiLine"></view>
						<view class="classInput2">{{ formList2.mobile }}</view>
					</uni-col>
				</uni-row>

				<view class="submitBtn">
					<button size="mini" @tap="gaoback" class="submitBtnL" type="default">{{ i18n.ctwfont18 }}</button>
					<button size="mini" class="submitBtnR" @tap="FormSubmit2" type="default">{{ i18n.ctwfont76 }}</button>
				</view>
			</view>
			<!-- 第三步 -->
			<uni-forms v-if="current === 3 && langShow2" class="formBox3" :modelValue="formList3" ref="form3" :rules="rules3" validateTrigger="bind">
				<uni-forms-item :label="i18n.ctwfont63" :labelWidth="120" name="password" required class="formItemBox">
					<input
						type="text"
						:maxlength="28"
						:password="YXeyeShow"
						class="classInput"
						:placeholder="i18n.ctwfont64"
						v-model="formList3.password"
						@input="binddata('password', $event.detail.value)"
					/>
				</uni-forms-item>
				<uni-forms-item :label="i18n.ctwfont65" :labelWidth="120" name="password2" required class="formItemBox">
					<input
						type="text"
						:maxlength="28"
						:password="YXeyeShow"
						class="classInput"
						:placeholder="i18n.ctwfont66"
						v-model="formList3.password2"
						@input="binddata('password2', $event.detail.value)"
					/>
					<uni-icons v-show="formList3.password2" @tap="YXeyeopen" class="nameIcon2" color="#9e9fa0" :type="YXeye" size="20" />
				</uni-forms-item>
				<view class="huiLine" style="margin-bottom: 30px;"></view>
				<view class="phoneNumBox">
					<view class="phoneNumL">{{ i18n.ctwfont81 }}{{ phoneNum }}</view>
					<view style="position: relative;">
						<picker class="pickerBox" @change="bindPickerChange" :value="index" :range="array">
							<view class="pickerBoxImg"><image style="width: 100%; height: 100%;" mode="scaleToFill" :src="arrayimg[index]"></image></view>
						</picker>
						<input style="padding-left: 38px;" type="text" :maxlength="4" class="classInputPoen" :placeholder="i18n.ctwfont84" v-model="formList3.yzm" />
					</view>
				</view>
				<view class="phoneNumBox">
					<view style="opacity: 0;">1</view>
					<view class="phoneNumR">
						<text v-if="canClick">{{ contents }}</text>
						<text v-else>{{ i18n.ctwfont82 }}</text>
						<button size="mini" @tap="getyouxianNum" :disabled="canClick" :class="canClick ? 'phonebtn2' : 'phonebtn'" type="default">{{ i18n.ctwfont86 }}</button>
					</view>
				</view>
				<view class="submitBtn">
					<button size="mini" @tap="gaoback" class="submitBtnL" type="default">{{ i18n.ctwfont18 }}</button>
					<button size="mini" class="submitBtnR" @tap="FormSubmit3" type="default">{{ i18n.ctwfont6 }}</button>
				</view>
			</uni-forms>
		</view>
		<!-- 注册成功 -->
		<uni-popup ref="loginPopupOk2" type="center" :animation="false" :maskClick="false">
			<view class="loginBox" @tap="goHomeBtn">
				<view class="imgBox"><image style="width: 100px; height: 50px; border-radius: 10px;" mode="scaleToFill" src="/static/icon/outLogo.png"></image></view>
				<view class="titleBox2">{{ i18n.ctwfont57 }}</view>
				<view class="titleBox2">{{ i18n.ctwfont83 }}</view>
			</view>
		</uni-popup>
		<!-- 设置 -->
		<uni-popup ref="SetUpPopup" type="center" :animation="false"><set-up-pages ref="showPopup" @closePopUp="closePopUp" /></uni-popup>
		<!-- 退出 -->
		<sign-out ref="signOutBox" />
	</view>
</template>

<script>
import dottedLine from '@/pages/logins/dottedLine.vue';
import setUpPages from '@/pages/setUpPages/index.vue';
import signOut from '@/pages/setUpPages/signOut.vue'; // 退出登录
import LanguageConfig from '@/i18n/LanguageConfig';
import { setStorage, getStorage } from '@/utils/setStorage.js';
import { codeMapFun } from '@/utils/codeMap.js';
import { loadFontFace } from '@/utils/loadFontFaceBox.js';
import baseFont from '@/utils/baseFont.js';
export default {
	extends: baseFont,
	data: function() {
		return {
			topBarHeight: 0, // 导航栏高度
			current: 1, // 当前步骤
			stepBarCurrent: 1,
			stepBarCurrent2: '',
			stepBarCurrent3: '',
			YXeye: 'eye-slash',
			index: 0, // 国旗
			YXeyeShow: true,
			secondNum: 300,
			contents: this.$t('login').ctwfont86,
			canClick: false,
			clock: '',
			formList: {
				phone: '', // 客户代号
				commodity: '' // 身份证
			},
			formList2: {
				customerChineseName: '', // 姓名
				customerCode: '', // 客户代号
				customerThaiName: '',
				customerEnName: '',
				idCard: '', // 身份证
				mobile: '', //　电话
				salespersonCode: '', // 销售代号
				sex: '' // 性别
			},
			formList3: {
				yzm: '',
				password: '',
				password2: ''
			},
			langShow1: true, // 切换语言时校验更新
			langShow2: true, // 切换语言时校验更新
			arrayimg: ['/static/icon/china.png', '/static/icon/thailand.png', '/static/icon/vietnam.png'],
			// titleName: [this.$t('login').ctwfont70, this.$t('login').ctwfont77, this.$t('login').ctwfont80],
			// 注册成功之后自动跳
			goSetTime: null
		};
	},
	components: { dottedLine, setUpPages, signOut },
	onLoad() {
		// 拦截物理返回键
		this.goBackBox();
	},
	onUnload() {
		uni.$off('goBack_k', this.goBackBox2);
	},
	onShow() {
		const languageFlag = getStorage('language') || 'th';
		if (languageFlag === 'zh') {
			this.index = 0;
		} else if (languageFlag === 'th') {
			this.index = 1;
		} else {
			this.index = 2;
		}
	},
	created() {
		const that = this;
		uni.getSystemInfo({
			success(res) {
				that.topBarHeight = res.statusBarHeight;
			}
		});
	},
	watch: {
		'formList.phone': {
			deep: true,
			handler(newVal, oldVal) {
				if (newVal) {
					this.formList.phone = newVal.toUpperCase();
				}
			}
		}
	},
	mounted() {},
	computed: {
		topBar() {
			let num = 0;
			num = this.topBarHeight + 64; // 44是顶部高度
			return num + 'px';
		},
		i18n() {
			return this.$t('login');
		},
		// contents2() {
		// 	return this.$t('login').ctwfont86;
		// },
		phoneNum() {
			// var lphone = this.formList2.mobile.replace(/^(\d{3})\d{4}(\d+)/, '$1****$2');
			// return lphone;
			return this.formList2.mobile;
		},
		titleName() {
			return [this.$t('login').ctwfont70, this.$t('login').ctwfont77, this.$t('login').ctwfont80];
		},
		array() {
			return [`${this.$t('login').ctwfont87}-86`, `${this.$t('login').ctwfont90}-66`, `${this.$t('login').ctwfont88}-84`];
		},
		rules() {
			return {
				// 客户代号
				phone: {
					rules: [
						{ required: true, errorMessage: this.$t('login').ctwfont116, trigger: 'blur' }
						// { minLength: 3, maxLength: 20, errorMessage: '长度在 3 到 20 个字符', trigger: 'blur' }
					]
				},
				// 身份证
				commodity: {
					rules: [{ required: true, errorMessage: this.$t('login').ctwfont119, trigger: 'blur' }]
				}
			};
		},
		rules3() {
			return {
				// 验证姓名
				password: {
					rules: [
						{ required: true, errorMessage: this.$t('login').ctwfont122, trigger: 'blur' },
						{ minLength: 6, maxLength: 28, errorMessage: this.$t('login').ctwfont125, trigger: 'blur' },
						{
							validateFunction: this.passwordValidateFunction2
						}
						// { pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,28}$/, errorMessage: '请输入正确的密码', trigger: 'blur' }
					]
				},
				password2: {
					rules: [
						{ required: true, errorMessage: this.$t('login').ctwfont130, trigger: 'blur' },
						{ minLength: 6, maxLength: 28, errorMessage: this.$t('login').ctwfont125, trigger: 'blur' },
						// { pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,28}$/, errorMessage: '请输入正确的密码', trigger: 'blur' },
						{
							validateFunction: this.passwordValidateFunction
						}
					]
				}
			};
		}
	},
	methods: {
		// 回退
		gaoback() {
			if (this.current === 3) {
				this.current = 2;
				this.stepBarCurrent2 = 2;
				this.stepBarCurrent3 = '';
				this.formList3 = {
					yzm: '',
					password: '',
					password2: ''
				};
			} else if (this.current === 2) {
				this.current = 1;
				this.stepBarCurrent1 = 1;
				this.stepBarCurrent2 = '';
				this.stepBarCurrent3 = '';
				this.formList = {
					phone: '', // 客户代号
					commodity: '' // 身份证
				};
			} else {
				// #ifdef APP-PLUS
				uni.redirectTo({
					url: `/pages/logins/phone`
				});
				// #endif
				// #ifdef H5
				this.$Router.push(`/pages/logins/phone`);
				// #endif
			}
		},
		goBackBox() {
			// const that = this;
			uni.$on('goBack_k', this.goBackBox2);
		},
		goBackBox2(data) {
			if (data) {
				this.gaoback();
			}
		},
		FormSubmit() {
			this.$refs.form2
				.submit()
				.then(async val => {
					const { phone, commodity } = this.formList;
					const params = {
						customerCode: phone,
						idCard: commodity
					};
					const { data: res } = await this.$http(true, 'api/user/register/customer', params, 'GET');
					if (res.errno === 0) {
						this.stepBarCurrent2 = 2;
						this.current = 2;
						this.formList2 = res.data;
					} else {
						if (res.data) {
							const arr = Object.values(res.data);
							const errnoNum = arr.filter(item => typeof item === 'number');
							const err = codeMapFun().find(item => item[errnoNum[0]]);
							if (err) {
								uni.showToast({
									title: err[errnoNum[0]],
									duration: 2000,
									icon: 'none',
									position: 'top'
								});
							} else {
								uni.showToast({
									title: res.errmsg,
									icon: 'none',
									position: 'top'
								});
							}
						} else {
							const err = codeMapFun().find(item => item[res.errno]);
							if (err) {
								uni.showToast({
									title: err[res.errno],
									duration: 2000,
									icon: 'none',
									position: 'top'
								});
							} else {
								uni.showToast({
									title: res.errmsg,
									icon: 'none',
									position: 'top'
								});
							}
						}
					}
				})
				.catch(err => {
					uni.showToast({
						title: 'Please fill in the correct information',
						icon: 'none',
						position: 'top'
					});
				});
		},
		// 眼睛
		YXeyeopen() {
			this.YXeyeShow = !this.YXeyeShow;
			if (this.YXeyeShow) {
				this.YXeye = 'eye-slash';
			} else {
				this.YXeye = 'eye';
			}
		},
		// 获取短信验证码
		async getyouxianNum() {
			let code = '';
			this.canClick = true;
			if (this.index === 0) {
				code = '86';
			} else if (this.index === 1) {
				code = '66';
			} else {
				code = '84';
			}
			const { mobile } = this.formList2;
			const params = {
				mobile: mobile,
				areaCode: code
			};
			// 第一个参数url, 第二个参数请求数据, 第三个请求方式
			const { data: res } = await this.$http(true, 'api/user/register/sendMessage', params, 'GET');
			if (res.errno === 0) {
				// this.canClick = true;
				this.contents = this.$t('login').ctwfont84 + this.secondNum + this.$t('login').ctwfont85;
				this.clock = setInterval(() => {
					this.secondNum--;
					this.contents = this.$t('login').ctwfont84 + this.secondNum + this.$t('login').ctwfont85;
					if (this.secondNum < 1) {
						// 当倒计时小于0时清除定时器
						clearInterval(this.clock);
						this.contents = this.$t('login').ctwfont86;
						this.secondNum = 300;
						this.canClick = false;
						this.clearCodeNum(params);
					}
				}, 1000);
			} else {
				this.canClick = false;
				const err = codeMapFun().find(item => item[res.errno]);
				if (err) {
					uni.showToast({
						title: err[res.errno],
						icon: 'none',
						position: 'top'
					});
				} else {
					uni.showToast({
						title: res.errmsg,
						icon: 'none',
						position: 'top'
					});
				}
			}
		},
		// 60秒后清楚验证吗
		async clearCodeNum(item) {
			const params = {
				mobile: item.mobile,
				function: 'REGISTER'
			};
			// 第一个参数url, 第二个参数请求数据, 第三个请求方式
			await this.$http(true, 'api/user/verificationCode/clear', params, 'GET');
		},
		// 确认身份
		FormSubmit2() {
			this.stepBarCurrent3 = 3;
			this.current = 3;
		},
		// 选择国籍
		bindPickerChange(val) {
			this.langShow2 = false;
			let lang = 'th';
			this.index = val.target.value;
			if (this.index === 0) {
				lang = 'zh';
			} else if (this.index === 1) {
				lang = 'th';
			} else {
				lang = 'en';
			}
			LanguageConfig.isExist(lang);
			this.$i18n.locale = lang;
			setStorage('language', lang);
			this.$nextTick(function() {
				loadFontFace();
				this.langShow2 = true;
				this.erificationOptimization();
			});
		},
		// 切换后校验优化
		erificationOptimization() {
			setTimeout(() => {
				this.formList3.password ? this.$refs.form3.setValue('password', this.formList3.password) : '';
				this.formList3.password2 ? this.$refs.form3.setValue('password2', this.formList3.password2) : '';
			}, 200);
		},
		// 切换后校验优化
		erificationOptimization2() {
			setTimeout(() => {
				this.formList.phone ? this.$refs.form2.setValue('phone', this.formList.phone) : '';
				this.formList.commodity ? this.$refs.form2.setValue('commodity', this.formList.commodity) : '';
			}, 200);
		},
		// 注册认证
		FormSubmit3() {
			this.$refs.form3
				.submit()
				.then(async val => {
					const { customerChineseName, customerCode, idCard, mobile, salespersonCode, sex } = this.formList2;
					const { yzm, password, password2 } = this.formList3;
					const params = {
						customerCode,
						gender: sex === '男' ? 'M' : 'F',
						mobile,
						idCard,
						salespersonCode,
						realName: customerChineseName,
						verificationCode: yzm,
						password: password,
						confirmPassword: password2
					};
					const { data: res } = await this.$http(true, 'api/user/register/customer', params, 'POST');
					if (res.errno === 0) {
						this.$refs.loginPopupOk2.open();
						this.goSetTime = setTimeout(() => {
							this.$refs.loginPopupOk2.close();
							// #ifdef APP-PLUS
							uni.redirectTo({
								url: '/pages/home/index'
							});
							// #endif
							// #ifdef H5
							this.$Router.push('/pages/home/index');
							// #endif
						}, 3000);
					} else {
						const arr = Object.values(res.data);
						const errnoNum = arr.filter(item => typeof item === 'number');
						const err = codeMapFun().find(item => item[errnoNum[0]]);
						if (err) {
							uni.showToast({
								title: err[errnoNum[0]],
								icon: 'none',
								position: 'top'
							});
						} else {
							uni.showToast({
								title: res.errmsg,
								icon: 'none',
								position: 'top'
							});
						}
						// arr.forEach(item => {
						// 	if (typeof item === 'string') {
						// 		uni.showToast({
						// 			title: item,
						// 			icon: 'none',
						// 			position: 'top'
						// 		});
						// 	}
						// });
					}
				})
				.catch(err => {
					uni.showToast({
						title: 'Please fill in the correct information',
						icon: 'none',
						position: 'top'
					});
				});
		},
		// 关闭注册成功弹框
		goHomeBtn() {
			// 关闭自动跳转
			clearTimeout(this.goSetTime);
			this.$refs.loginPopupOk2.close();
			// #ifdef APP-PLUS
			uni.redirectTo({
				url: '/pages/home/index'
			});
			// #endif
			// #ifdef H5
			this.$Router.push('/pages/home/index');
			// #endif
		},
		// 密码异步校验
		passwordValidateFunction(rule, value, data, callback) {
			if (value !== this.formList3.password) {
				callback(this.$t('login').ctwfont121);
			} else {
				this.$refs.form3.setValue('password', value);
			}
			return true;
		},
		// 密码异步校验
		passwordValidateFunction2(rule, value, data, callback) {
			if (this.formList3.password2) {
				if (value !== this.formList3.password2) {
					callback(this.$t('login').ctwfont121);
				} else {
					this.$refs.form3.setValue('password2', value);
				}
			}
			return true;
		},
		// 打开设置
		showSetUp() {
			this.$refs.SetUpPopup.open('right');
			this.popupIsShow = true;
		},
		// 关闭设置
		closePopUp(val) {
			this.langShow1 = false;
			this.langShow2 = false;
			if (val) {
				this.$refs.SetUpPopup.close();
				this.popupIsShow = false;
			} else {
				this.$refs.SetUpPopup.close();
				this.popupIsShow = false;
				this.$refs.signOutBox.open();
				this.signOutShow = true;
			}
			const languageFlag = getStorage('language') || 'th';
			if (languageFlag === 'zh') {
				this.index = 0;
			} else if (languageFlag === 'th') {
				this.index = 1;
			} else {
				this.index = 2;
			}
			this.$nextTick(function() {
				this.langShow1 = true;
				this.langShow2 = true;
				// this.erificationOptimization();
				if (this.current === 3) {
					this.erificationOptimization();
				} else if (this.current === 1) {
					this.erificationOptimization2();
				}
				this.contents = this.$t('login').ctwfont86;
			});
		}
	}
};
</script>

<style lang="scss" scoped>
// 多行文本
::v-deep .uni-easyinput__content-textarea {
	min-height: 50px;
	height: 50px;
}
// formItem
::v-deep .uni-forms-item {
	margin-bottom: 19px;
}
::v-deep uni-button:after {
	border: none;
}
::v-deep .uni-forms-item__label {
	height: 25px;
	font-size: $uni-font-size-custom-b;
}
::v-deep .uni-forms-item__content {
	min-height: 25px;
}
.titleImg {
	width: 60px;
	height: 30px;
	margin: 0 auto;
	border-radius: 50%;
	overflow: hidden;
}
.leftIconBox {
	width: 25px;
	height: 25px;
	background-color: #fff;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-left: 15px;
}
.topBox {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 10;
	// 顶部部分
	.status_bar {
		height: var(--status-bar-height);
		background-color: #f1f1f1;
		width: 100%;
	}
}
.huiLine {
	border-top: 1px solid #b0b0b0;
	margin: 5px auto;
}
.pickerBox {
	position: absolute;
	z-index: 10;
	// left: 110px;
	left: 5px;
	.pickerBoxImg {
		width: 30px;
		height: 28px;
	}
}
.loginBox {
	width: 700rpx;
	height: 150px;
	border-radius: 10px;
	background-color: #CD001B;
	.imgBox {
		display: flex;
		justify-content: center;
		padding: 20px 20px 15px 20px;
	}
	.titleBox2 {
		text-align: center;
		color: #ebedf3;
		font-size: $uni-font-size-custom-d;
	}
}
.zhuti {
	.titleBox {
		margin-bottom: 5px;
		display: flex;
		justify-content: center;
		.titleBoxcenter {
			width: 90%;
			height: 30px;
			line-height: 30px;
			border-radius: 5px;
			text-align: center;
			background-color: #f2f2f2;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 1; // 多行在这里修改数字即可
			overflow: hidden;
			-webkit-box-orient: vertical;
		}
	}
	.tishiTitle {
		text-align: center;
		font-size: $uni-font-size-custom-d;
		color: #7a7b84;
		margin-bottom: 10px;
	}
	.stepBarBox {
		position: relative;
		margin-top: 20px;
		margin-bottom: 20px;
		.dottedLine {
			position: absolute;
			top: 40%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 55%;
			z-index: -1;
		}
		.stepBarItem {
			margin: 0 auto;
			width: 70%;
			display: flex;
			justify-content: space-between;
			// align-items: center;
			height: 80px;
			.stepBarP {
				position: relative;
				.stepBarPLine {
					position: absolute;
					top: 35%;
					right: -118%;
					transform: translateY(-50%);
					width: 120%;
					z-index: -1;
				}
				.stepBarItemBox {
					width: 50px;
					height: 50px;
					line-height: 50px;
					text-align: center;
					border-radius: 50%;
					background-color: #fff;
					border: 2px solid #e4e4e4;
					color: #e4e4e4;
					font-size: $uni-font-size-custom-g;
				}
				.stepBarItemText {
					position: absolute;
					left: 50%;
					transform: translateX(-50%);
					width: 80px;
					margin-top: 5px;
					text-align: center;
					font-size: $uni-font-size-custom-b;
					font-weight: 700;
					line-height: 14px;
					color: #e4e4e4;
				}
				.isOkClick {
					background-color: #CD001B;
					border: 2px solid #80b2ff;
					color: #fff;
				}
				.isOkClick2 {
					background-color: #ffffff;
					border: 2px solid #038a15;
				}
				.isOkClickText {
					color: #595b66;
				}
			}
		}
	}
	.formBox {
		// position: absolute;
		// top: 80px;
		// width: 100%;
		padding: 0 30px;
		box-sizing: border-box;
		margin-top: 5px;
		// padding: 0 30px;
	}
	.formBox2 {
		// position: absolute;
		// top: 80px;
		// width: 100%;
		// padding: 0 60px;
		padding: 0 20px;
		box-sizing: border-box;
		// padding: 0 30px;
		.boxShow {
			box-shadow: 0 3px 5px 1px #dedede;
			padding: 10px 20px 5px 20px;
			box-sizing: border-box;
			background-color: #fbfbfb;
			.classInput2 {
				position: relative;
				height: 35px;
				line-height: 35px;
				font-size: $uni-font-size-custom-d;
				// text-align: right;
				color: #434552;
			}
		}
		.formBoxTitleT {
			display: flex;
			justify-content: center;
			align-items: center;
			margin-top: 10px;
			margin-bottom: 20px;
			.formBoxTitleTBox {
				display: flex;
				align-items: center;
				.formBoxTitleTBoxImg {
					width: 60px;
					height: 45px;
					margin: 0 auto;
					border-radius: 50%;
					overflow: hidden;
					margin-right: 10px;
				}
			}
		}
	}
	.formBox3 {
		padding: 0 20px;
		box-sizing: border-box;
		.phoneNumBox {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 20px;
			.phoneNumL {
				font-size: $uni-font-size-custom-b;
				color: #444653;
			}
			.phoneNumR {
				font-size: $uni-font-size-custom-b;
				color: #878787;
				display: flex;
				align-items: center;
				.phonebtn {
					font-size:$uni-font-size-custom-b;
					background-color: #d80c24;
					border: 1px solid #bb3242;
					padding: 0 10px;
					border-radius: 5px;
					color: #ffffff;
					line-height: 1.8;
					margin: 0;
					margin-left: 10px;
				}
				.phonebtn2 {
					font-size: $uni-font-size-custom-b;
					background-color: #ccc;
					border: 1px solid #ccc;
					padding: 0 10px;
					border-radius: 5px;
					color: #7d7d7d;
					line-height: 1.8;
					margin: 0;
					margin-left: 10px;
				}
			}
		}
	}
	.formItemBox {
		.classInput {
			position: relative;
			height: 25px;
			color: #9e9fa0;
			border: 1px solid #e7e7e7;
			border-radius: 5px;
			padding: 0 5px;
			font-size: $uni-font-size-custom-b;
		}
		.nameIcon2 {
			position: absolute;
			right: 10px;
			top: 5px;
		}
	}
	.classInputPoen {
		position: relative;
		height: 25px;
		color: #9e9fa0;
		border: 1px solid #e7e7e7;
		border-radius: 5px;
		padding: 0 5px;
		font-size: $uni-font-size-custom-b;
	}
	.submitBtn {
		margin-top: 80px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.submitBtnR {
			background-color: #CD001B;
			padding: 0 20px;
			border-radius: 5px;
			color: #ffffff;
			line-height: 2;
			margin: 0;
		}
		.submitBtnL {
			background-color: #cbcbcb;
			padding: 0 20px;
			border-radius: 5px;
			color: #ffffff;
			line-height: 2;
			margin: 0;
		}
	}
}
</style>
